<template>
  <div class="tabBtns">
    <el-button
      v-for="(item, index) in mainBtns"
      type="text"
      size="small"
      class="btn-tab"
      :style="{ color: item.color }"
      :key="index"
      :icon="`iconfont ${item.icon}`"
      :disabled="disabled(item)"
      @click="btnClick(item, $event)"
      :loading="item.loading"
      :title="item.name"
    >
      <template v-if="!item.icon">
        <span class="txt" :style="{ color: item.color }">{{ item.name }}</span>
      </template>
    </el-button>

    <el-dropdown v-if="dropDownBtns.length" class="dropdown">
      <span>
        更多
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu class="dropMenu" slot="dropdown">
        <el-dropdown-item
          v-for="(item, index) in dropDownBtns"
          @click.native="btnClick(item, $event)"
          :disabled="disabled(item)"
          :key="index"
          :icon="item.icon"
          >{{ item.name }}</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
/**
 * 列表操作栏按钮组
 * 注意
 */

import { mapGetters } from 'vuex';
export default {
  props: {
    btns: {
      type: Array,
      default() {
        return [];
      }
    },
    max: {
      type: Number,
      default: 3
    },
    scope: {
      type: Object,
      required: true
    }
  },
  computed: {
    ...mapGetters(['permissions']),
    mainBtns() {
      // console.log(this.permissions.analysis_financeEngine_view)
      const list = this.btns.filter((item) => {
        const c1 = !(
          item.permissions && this.permissions[item.permissions] !== true
        );

        if (typeof item.show === 'boolean') {
          return c1 && item.show;
        }
        if (typeof item.show === 'function') {
          const c2 = item.show(this.scope.row, this.scope.index);
          return c1 && c2;
        }
        return c1;
      });
      let end = this.max;
      if (list.length > this.max) {
        end -= 1;
      }

      return list.slice(0, end);
    },
    dropDownBtns() {
      const list = this.btns.filter((item) => {
        const c1 = !(
          item.permissions && this.permissions[item.permissions] !== true
        );

        if (typeof item.show === 'boolean') {
          return c1 && item.show;
        }
        if (typeof item.show === 'function') {
          const c2 = item.show(this.scope.row, this.scope.index);
          return c1 && c2;
        }
        return c1;
      });
      let start = this.max;
      if (list.length > this.max) {
        start -= 1;
      }

      return list.slice(start);
    }
  },
  methods: {
    disabled(btn) {
      if (typeof btn.disabled === 'function') {
        return btn.disabled(this.scope.row, this.scope.index);
      }
      return btn.disabled;
    },

    btnClick(btn, event) {
      if (typeof btn.click === 'function') {
        btn.click(this.scope.row, this.scope.index, event);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';
.dropdown {
  //color: $themeColor;
  margin-left: 10px;
  font-size: 12px;
  cursor: pointer;
}
.dropMenu {
  >>> .el-dropdown-menu__item {
    font-size: 12px;
  }
}
.tabBtns {
  >>> .el-button--small {
    padding-left: 0;
    padding-right: 0;
  }
  >>> .el-button + .el-button,
  .dropdown {
    position: relative;
    padding-left: 11px;
    &::before {
      position: absolute;
      left: 0;
      top: 50%;
      width: 1px;
      height: 14px;
      //background-color: $themeColor;
      transform: translateY(-7px);
    }
  }
}
.btn-tab .txt {
  font-size: 12px;
}

.iconfabu1 {
  //background: url('../../assets/img/icon_list_publish.png') center no-repeat;
  background-size: 100%;
}
</style>
